<template>
	<div class="track">
		<div class="operation">
			<el-button class="btn" @click="handleOpenPoly" style="margin-bottom: 5px">创建围栏</el-button>
			<el-button class="btn" @click="handleClosePoly" style="margin-bottom: 5px">确认围栏</el-button>
		</div>
		<Amap class="box_map" ref='amapRef' />
	</div>
</template>

<script setup lang="ts">
import { mapTrajectory } from '@/api/tankManagements/index'
import Amap from '@/components/AMap/index.vue'
import { onMounted, toRefs } from 'vue'
const props = defineProps({
	path: {
		type: Array,
		default: [] as object[]
	}
})
const { path } = toRefs(props)
const emit = defineEmits(['open', 'close'])
const amapRef = ref()
const polygonPoints = ref()
let polyEditor: any
let mouseTool: any
// let path = []
// let path = [[116.475334, 39.997534], [116.476627, 39.998315], [116.478603, 39.99879], [116.478529, 40.000296], [116.475082, 40.000151], [116.473421, 39.998717]]
let polygon: any
let polygonEditor: any
const mapPolygon = async () => {
	// // 创建鼠标工具实例
	// mouseTool = new amapRef.value.AMap.MouseTool(amapRef.value.map);
	// 绘制多边形
	// mouseTool.polygon()
	console.log('--------', path);

	polygon = new amapRef.value.AMap.Polygon({
		map: amapRef.value.map,
		path: path.value,
		strokeColor: '#FF33FF',
		strokeOpacity: 0.2,
		fillColor: '#1791fc',
		fillOpacity: 0.4,
		strokeWeight: 3,
		bubble: true,
	})
	amapRef.value.map.add(polygon)
	amapRef.value.map.setFitView()
	polygonEditor = new amapRef.value.AMap.PolygonEditor(amapRef.value.map, polygon)
	polygonEditor.addAdsorbPolygons(polygon)
	// polygonEditor.on('click',(data)=> {
	// 	console.log(data)
	// 	// console.log(data.obj.getPath())
	// })
	// polygonEditor.on('add', function (data) {
	// 	console.log(data)
	// 	// console.log(data.obj.getPath())
	// })
	// polygonEditor.on('adjust', function(data) {
	//     console.log('触发事件：adjust',data)
	// })
	// polygonEditor.on('dragend',(data)=> {
	// 	console.log('dragend',data.obj.getPath())
	// })
	// polygonEditor.on('end', (e) => {
	// 	// const newPath = e.path; // 获取变化后的多边形路径
	// 	console.log('end',e);
	// });

}

// 开始编辑
const handleOpenPoly = () => {
	polygonEditor.destroy()
	polygonEditor.setTarget()
	polygonEditor.open()
}
// 结束编辑
const handleClosePoly = () => {
	polygonEditor.close();
	// 获取编辑后的多边形坐标
	let path = polygonEditor.getTarget().getPath()
	console.log(path);
	emit('close', path)
}


onMounted(() => {
	setTimeout(() => {
		// 	polygon()
		mapPolygon()
	}, 2000)
})
</script>

<style scoped lang="scss">
.track {
	width: 100%;
	height: 100%;
	position: relative;

	.operation {
		position: absolute;
		bottom: 20px;
		right: 20px;
		z-index: 10;
		display: flex;
		justify-content: center;
		flex-direction: column;

		.btn {
			margin: 0;
		}
	}
}
</style>